<template>
  <boder-box-1>
    <dv-card>
      <template #header>
        <dv-title1
          :background-image-url="
            require('@/assets/threeGovernment/titleBj.png')
          "
          >三项专项治理</dv-title1
        >
      </template>
      <div class="content">
        <dv-card :cardBg="require('@/assets/threeGovernment/1bg.png')" sub>
          <template #header>
            <dv-title-2>优化营商环境专项治理行动</dv-title-2>
          </template>
          <div style="padding-left: 10px">
            <Image
              :src="require('@/assets/components/654333/a4.png')"
              width="420"
            ></Image>
            <radar
              eleId="bar11"
              remark="单位:数量"
              :legend="true"
              width="420"
              height="150"
              :background="false"
              :source="bar2"
              :color="['#00A1FF', '#5CE0E2']"
              :round="false"
              :area="true"
            ></radar>
          </div>
        </dv-card>

        <dv-card :cardBg="require('@/assets/threeGovernment/2bg.png')">
          <template #header>
            <dv-title-2>村干部守纪立规专项治理行动</dv-title-2>
          </template>
          <Image
            :src="require('@/assets/components/654333/a5.png')"
            width="430"
          ></Image>
        </dv-card>

        <dv-card :cardBg="require('@/assets/threeGovernment/3bg.png')" sub>
          <template #header>
            <dv-title-2>干部“不作为、慢作为、乱作为”作风问题专项</dv-title-2>
          </template>
          <bar-stack
            width="430"
            height="250"
            eleId="barStack1"
            remark="单位：人数"
            :source="bar3"
            :barWidth="15"
            :stack="true"
            :legend="true"
          ></bar-stack>
        </dv-card>
      </div>
    </dv-card>
  </boder-box-1>
</template>

<script>
import BoderBox1 from "@/components/BorderBox1/index.vue";
import DvTitle1 from "@/components/DvTitle1.vue";
import DvCard from "@/components/DvCard/index.vue";
import DvTitle2 from "@/components/DvTitle2.vue";
import Radar from "@/components/charts/Bar";
import BarStack from "@/components/charts/BarStack";
import Image from "@/components/Image";
export default {
  name: "ThreeGovernment",
  components: {
    BoderBox1,
    DvTitle1,
    DvCard,
    DvTitle2,
    Radar,
    BarStack,
    Image,
  },
  data() {
    return {
      bar2: {
        name: ["单位1", "单位2", "单位3", "单位4", "单位5", "单位6"],
        series: [
          { data: [32, 58, 64, 64, 64, 25], type: "line", name: "男" },
          { data: [23, 42, 51, 25, 32, 38], type: "line", name: "女" },
        ],
      },
      bar3: {
        name: ["单位1", "单位2", "单位3", "单位4", "单位5", "单位6"],
        series: [
          {
            data: [32, 58, 64, 64, 64, 25],
            type: "line",
            value: 20,
            name: "不作为",
          },
          {
            data: [23, 42, 51, 25, 32, 38],
            type: "line",
            value: 16,
            name: "乱作为",
          },
          {
            data: [23, 42, 51, 25, 32, 38],
            type: "line",
            value: 12,
            name: "慢作为",
          },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.content {
  display: grid;
  grid-template-rows: 256px 306px 315px;
}
</style>
